<template>
	<view class="navDetailContainer">
		<view class="header">
			<view>现货</view>
			<view>销量</view>
			<view>价格</view>
			<view>筛选</view>
		</view>
		<scroll-view class="navDetailScroll" scroll-y="true" enable-flex>
			<view class="scrollItem" v-for="(detail,index) in navDetail" :key="image.id">
				<image class="scrollImg" :src="detail.image" mode=""></image>
				<view class="scrollItemText">
					<text class="scrollItemTitle">{{detail.title}}</text>
					<text class="srcollItemSize">型号：3701CN</text>
					<text class="scrollItemNum">订货号：XH003815210</text>
					<view class="scrollItemDate">货期：<text class="nowDate">{{detail.delivery}}</text></view>
					<view class="scrollItemOther"><text class="shopSale" v-if="detail.shopName">{{detail.shopName}}</text><text class="sale" v-if="detail.minimumCouponName">券</text><text class="send" v-if="detail.mallActivitiesStr">赠</text></view>
					<view class="scrollItemPrice">
						<image class="logoImg" src="../../../../static/images/company.png" mode=""></image>
						<text class="content">￥{{detail.salePrice}}/{{detail.skuUnit}}</text>
						<text class="originPrice">{{detail.price}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:"NavDetail",
		data() {
			return {
				
			};
		},
		mounted() {
			this.getNavDetail()
		},
		methods:{
			getNavDetail(){
				this.$store.dispatch('navListDetail/getNavDetail')
			}
		},
		computed:{
			...mapState('navListDetail',['navDetail'])
		}
	}
</script>

<style lang="stylus">
	.navDetailContainer
		height: 100%
		.header
			height: 80upx
			display: flex
			font-size: 34upx
			justify-content: space-around
			align-items: center
			text-align: center
		.navDetailScroll
			height: calc(100vh - 80upx)
			display: flex
			flex-direction: column
			.scrollItem
				display: flex
				width: 100%
				.scrollImg
					width: 400upx
					height: 400upx
					flex-shrink: 0
				.scrollItemText
					display: flex
					flex-direction: column
					.scrollItemTitle
						font-size: 32upx
						flex-wrap: wrap
					.srcollItemSize
						font-size: 28upx
						color: gray
					.scrollItemNum
						font-size: 28upx
						color: gray
					.scrollItemDate
						font-size: 28upx
						color: gray
						.nowDate
							border: 2upx solid red
							font-size: 30upx
							color: red
							font-weight: lighter
					.scrollItemOther
						margin: 10upx 0
						display: flex
						color: white
						font-size: 28upx
						.shopSale
							background-color: red
						.sale
							background-color: blue
						.send
							background-color: green
					.scrollItemPrice
						display: flex
						flex-wrap: nowrap
						align-items: center
						.logoImg		
							width: 40upx
							height: 40upx
						.content
							color: red
							font-size: 24upx
						.originPrice
							font-size: 18upx
							color: gray
							text-decoration: line-through
							margin-left: 10upx
									
</style>